<template>
  <a-modal
    width="50%"
    :title="title"
    :visible="isModal"
    :footer="null"
    :maskClosable="false"
    :bodyStyle="{ height: '700px', overflow: 'auto' }"
    forceRender
    destroyOnClose
    @cancel="isModal = false"
  >
    <div :key="subKey">
      <div class="core_top">
        <SubAttribute />
      </div>
      <div class="core_bottom">
        <SubFieldList />
      </div>
    </div>

    <!-- 按钮 -->
    <div class="btnBox">
      <a-button
        @click="
          () => {
            isModal = false
          }
        "
        :style="{ marginRight: '8px' }"
        icon="rollback"
      >
        返回
      </a-button>
      <a-button @click="configSave()" type="primary" :style="{ marginRight: '8px' }" icon="save"> 保存 </a-button>
    </div>
  </a-modal>
</template>
<script>
import { setSubTable, subCurrentObj } from '@/utils/formassembly/generaltree.js'
import { parseData } from '@/utils/component/parsetree.js'
export default {
  data() {
    return {
      isModal: false,
      title: '',
      subKey: 0,
    }
  },
  created() {},
  methods: {
    // 从表配置保存
    configSave() {
      if (!subCurrentObj.apltable) {
        this.$message.warning('请选择申请表')
        return
      }
      if (!subCurrentObj.label) {
        this.$message.warning('请填写从表标题')
        return
      }
      if (!subCurrentObj.relationfield) {
        this.$message.warning('请选择关联字段')
        return
      }
      if ((subCurrentObj.require == undefined)) {
        this.$message.warning('请选择是否必填')
        return
      }
      let result = parseData(subCurrentObj.fieldlist, 0)
      subCurrentObj.rules = result.rules
      subCurrentObj.filters = result.filters
      subCurrentObj.maprelation = result.maprelation
      setSubTable()
      console.log('subCurrentObj', subCurrentObj)
      this.$message.success('从表保存成功')
      this.isModal = false
    },
    // 父组件调用初始化方法
    f_init(title) {
      this.title = title + ' - 从表配置'
      this.isModal = true
      this.subKey++
    },
  },
  components: {
    SubAttribute: () => import('@/views/businessAssembly/generaltree/subtable/subAttribute.vue'),
    SubFieldList: () => import('@/views/businessAssembly/generaltree/subtable/subFieldList.vue'),
  },
}
</script>

<style lang="less" scoped>
.core_top,
.core_bottom {
  width: 100%;
  border: 1px solid #eee;
  overflow: auto;
}
.core_top {
  height: 30%;
}
.core_bottom {
  height: 60%;
}
.btnBox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 10%;
}
</style>
